<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>readThis</title>

    <style type="text/css">
        div {
            width: 600px;
        }

        #smaller {
            background-color: #00f;
            cursor: pointer;
        }

        #larger {
            background-color: #0f0;
            cursor: pointer;
        }

        #div1 {
            font-size: 15px;
            letter-spacing: normal;
            text-align: left;
            text-transform: none;
            line-height: 18px;
            font-weight: normal;
        }
        
    </style>

    <script type="text/javascript">
    //<![CDATA[
        function makeMore() {
            var div = document.getElementById("div1");
            div.style.letterSpacing="5px";
            div.style.textAlign = "justify";
            div.style.textTransform = "uppercase";
            div.style.fontSize = "25px";
            div.style.fontWeight = "900";
            div.style.lineHeight = "30px";
        }

        function makeLess() {
            var div = document.getElementById("div1");
            div.style.fontSize = "15px";
            div.style.letterSpacing = "normal";
            div.style.textAlign = "left";
            div.style.textTransform = "none";
            div.style.fontWeight = "normal";
            div.style.lineHeight = "18px";
        }

        window.onload = function() {
            document.getElementById("smaller").onclick = makeLess;
            document.getElementById("larger").onclick = makeMore;
        }

    //]]>

    </script>
    
</head>
<body>
    <div id="smaller">
        <p>Make smaller</p>
    </div>

    <div id="larger">
        <p>Make larger</p>
    </div>

    <div id="div1">
        <p>
           A lot of things.  A lot of things.A lot of things.A lot of things.A lot of things.
           A lot of things.A lot of things.A lot of things.A lot of things.A lot of things.
           A lot of things.A lot of things.A lot of things.A lot of things.A lot of things.
           A lot of things.A lot of things.A lot of things.A lot of things.
           A lot of things.A lot of things.A lot of things.A lot of things.
        </p>

    </div>

</body>
</html>
